import React, { useState, useEffect } from 'react';
import { Button, Text } from 'packages/ui-shared/src/atoms';
import { useSession } from '../hooks/useSession';
import { useNavigate } from 'react-router-dom';

export default function SystemSettingsPage() {
  const { session } = useSession();
  const navigate = useNavigate();
  const [systemInfo, setSystemInfo] = useState({
    version: '1.0.0',
    lastUpdate: '2024-01-15',
    totalUsers: 0,
    totalRoles: 3,
    totalPermissions: 12
  });

  // 检查权限
  const canManageSettings = session?.userRole === 'admin';

  useEffect(() => {
    // 模拟获取系统信息
    setSystemInfo(prev => ({
      ...prev,
      totalUsers: Math.floor(Math.random() * 100) + 50
    }));
  }, []);

  if (!canManageSettings) {
    return (
      <div className="p-6">
        <div className="text-center">
          <Text className="text-xl text-red-500">访问被拒绝</Text>
          <Text className="text-gray-500 mt-2">您没有权限访问系统设置页面</Text>
        </div>
      </div>
    );
  }

  return (
    <div className="p-6">
      {/* 页面头部 */}
      <div className="mb-6">
        <Text className="text-2xl font-bold text-gray-900 mb-2">系统设置</Text>
        <Text className="text-gray-600">管理系统配置和权限设置</Text>
      </div>

      {/* 系统信息卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div className="bg-white p-6 rounded-lg shadow">
          <div className="flex items-center">
            <div className="flex-shrink-0">
              <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
                <Text className="text-white text-sm">📊</Text>
              </div>
            </div>
            <div className="ml-4">
              <Text className="text-sm font-medium text-gray-600">系统版本</Text>
              <Text className="text-lg font-bold text-gray-900">{systemInfo.version}</Text>
            </div>
          </div>
        </div>

        <div className="bg-white p-6 rounded-lg shadow">
          <div className="flex items-center">
            <div className="flex-shrink-0">
              <div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                <Text className="text-white text-sm">👥</Text>
              </div>
            </div>
            <div className="ml-4">
              <Text className="text-sm font-medium text-gray-600">总用户数</Text>
              <Text className="text-lg font-bold text-gray-900">{systemInfo.totalUsers}</Text>
            </div>
          </div>
        </div>

        <div className="bg-white p-6 rounded-lg shadow">
          <div className="flex items-center">
            <div className="flex-shrink-0">
              <div className="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center">
                <Text className="text-white text-sm">🔐</Text>
              </div>
            </div>
            <div className="ml-4">
              <Text className="text-sm font-medium text-gray-600">角色数量</Text>
              <Text className="text-lg font-bold text-gray-900">{systemInfo.totalRoles}</Text>
            </div>
          </div>
        </div>

        <div className="bg-white p-6 rounded-lg shadow">
          <div className="flex items-center">
            <div className="flex-shrink-0">
              <div className="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center">
                <Text className="text-white text-sm">🛡️</Text>
              </div>
            </div>
            <div className="ml-4">
              <Text className="text-sm font-medium text-gray-600">权限数量</Text>
              <Text className="text-lg font-bold text-gray-900">{systemInfo.totalPermissions}</Text>
            </div>
          </div>
        </div>
      </div>

      {/* 设置选项 */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* 角色管理 */}
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center mb-4">
            <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
              <Text className="text-2xl">🔐</Text>
            </div>
            <div>
              <Text className="text-lg font-semibold text-gray-900">角色管理</Text>
              <Text className="text-sm text-gray-600">管理系统角色和权限配置</Text>
            </div>
          </div>
          <Text className="text-sm text-gray-500 mb-4">
            管理系统中所有角色的权限配置，包括管理员、用户、访客等角色的权限设置。
          </Text>
          <Button
            variant="primary"
            onClick={() => navigate('/app/settings/roles')}
            className="w-full"
          >
            进入角色管理
          </Button>
        </div>

        {/* 权限管理 */}
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center mb-4">
            <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
              <Text className="text-2xl">🛡️</Text>
            </div>
            <div>
              <Text className="text-lg font-semibold text-gray-900">权限管理</Text>
              <Text className="text-sm text-gray-600">管理系统权限配置</Text>
            </div>
          </div>
          <Text className="text-sm text-gray-500 mb-4">
            管理系统中的所有权限，包括用户管理、审计日志、系统设置等各类权限的配置。
          </Text>
          <Button
            variant="primary"
            onClick={() => navigate('/app/settings/permissions')}
            className="w-full"
          >
            进入权限管理
          </Button>
        </div>

        {/* 系统配置 */}
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center mb-4">
            <div className="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mr-4">
              <Text className="text-2xl">⚙️</Text>
            </div>
            <div>
              <Text className="text-lg font-semibold text-gray-900">系统配置</Text>
              <Text className="text-sm text-gray-600">基本系统参数设置</Text>
            </div>
          </div>
          <Text className="text-sm text-gray-500 mb-4">
            配置系统基本参数，包括会话超时时间、密码策略、MFA设置等。
          </Text>
          <Button
            variant="outline"
            onClick={() => {
              // 这里可以添加系统配置功能
              alert('系统配置功能开发中...');
            }}
            className="w-full"
          >
            进入系统配置
          </Button>
        </div>

        {/* 数据管理 */}
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center mb-4">
            <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
              <Text className="text-2xl">💾</Text>
            </div>
            <div>
              <Text className="text-lg font-semibold text-gray-900">数据管理</Text>
              <Text className="text-sm text-gray-600">数据备份和清理</Text>
            </div>
          </div>
          <Text className="text-sm text-gray-500 mb-4">
            管理系统数据，包括数据备份、清理过期数据、数据导出等功能。
          </Text>
          <Button
            variant="outline"
            onClick={() => {
              // 这里可以添加数据管理功能
              alert('数据管理功能开发中...');
            }}
            className="w-full"
          >
            进入数据管理
          </Button>
        </div>
      </div>

      {/* 系统状态 */}
      <div className="mt-8 bg-white rounded-lg shadow p-6">
        <Text className="text-lg font-semibold mb-4">系统状态</Text>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="text-center p-4 bg-green-50 rounded-lg">
            <Text className="text-2xl font-bold text-green-600">正常</Text>
            <Text className="text-sm text-gray-600">系统运行状态</Text>
          </div>
          <div className="text-center p-4 bg-blue-50 rounded-lg">
            <Text className="text-2xl font-bold text-blue-600">99.9%</Text>
            <Text className="text-sm text-gray-600">系统可用性</Text>
          </div>
          <div className="text-center p-4 bg-yellow-50 rounded-lg">
            <Text className="text-2xl font-bold text-yellow-600">低</Text>
            <Text className="text-sm text-gray-600">系统负载</Text>
          </div>
        </div>
      </div>
    </div>
  );
}